<template>
<div class=" overflow-y">
    <img :src="detail.first_img" alt="" class="big-img">
    <van-sticky offset-top="1.6rem">
        <van-tabs v-model="active" class="van-hairline--bottom" title-active-color="#ea251c" line-width="50%" line-height="2px" @change="tabChange">
            <van-tab title="公司简介"></van-tab>
            <van-tab title="全部产品"></van-tab>
        </van-tabs>

    </van-sticky>
    <van-swipe class="my-swipe flex-1" ref="vanSuipe" :loop="false" :show-indicators="false" @change="swipeChange">
        <van-swipe-item>
            <div class="flex-1 box">
                <template v-if="active === 0">
                    <div class="bgc-white p20 text-left fz-12">
                        <div class="mb10">
                            <span class="iblock width-80 text-gray">公司名称：</span>
                            <span class="iblock blod">{{detail.name}}</span>
                        </div>
                        <div class="mb10">
                            <span class="iblock width-80 text-gray">企业类型：</span>
                            <span class="iblock blod">{{detail.ltd_level_name}}</span>
                        </div>
                        <div class="mb10">
                            <span class="iblock width-80 text-gray">负者人：</span>
                            <span class="iblock blod">{{detail.contact_name}}</span>
                        </div>
                        <div class="">
                            <span class="iblock width-80 text-gray">负者人电话：</span>
                            <span class="iblock price price">{{detail.phone}}</span>
                        </div>
                    </div>
                    <div class="bgc-white p20 mt20 mb20 text-left">
                        <div class="text-gray">经营品牌：</div>
                        <div class="big flex-wrap">
                            <RouterLink to="" v-for="(item, index) in brand_list" :key="index" class="img-box">
                                <van-image
                                    class="brnad-img"
                                    fit="contain"
                                    :src="item.img"
                                    lazy-load
                                />
                            </RouterLink>
                        </div>
                    </div>
                </template>
            </div>
        </van-swipe-item>
        <van-swipe-item>
            <div class="flex-1 box ">
				
                <div class="item flex-center-space-between van-hairline--bottom" v-for="(item, index) in goods_list" :key="index">
   
                    <div class="shop-box-data flex-1 flex-center">
                        <RouterLink :to="`/product?id=${item.id}`">
                            <img :src="item.cover_img" alt="">
                        </RouterLink>
                        <div class="msg flex-1 text-left ">
                            <div class=" blod name van-multi-ellipsis--l2">
                                {{item.name}}
                            </div>
                            <div class="text-gray font-size-12">
                                <div class="flex-center padd">
                                    <div class="flex-1">品牌：{{item.brand_name}}</div>
                                    <div class="flex-1"><van-icon name="location-o" />{{item.city}}</div>
                                </div>
                                <div class="padd">
                                    库存数量：{{item.stock}}套
                                </div>
                            </div>
                            <div class="tag flex-center-space-between font-size-12" style="margin-top: 0.1rem">
                                <span class="price blod" v-if="token">{{item.price}}</span>
                                <span class="price blod" v-else>认证会员可见</span>
                            </div>
                        </div>
                    </div>
					
                </div>
            </div>
        </van-swipe-item>
    </van-swipe>
    <!-- <div class=" pink">1</div> -->
</div>
</template>

<script>
export default {
    data () {
        return {
            active: 0,
			detail:'',
            list: [
                { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 0 },
                { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 1 },
                { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 2 },
                { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 3 }
            ],
			brand_list:[],
			goods_list:[],
			token:this.$store.getters['user/userinfo'].token,
        }
    },
	created: function() {
		
		this.getBaseInfo()
		
	},
	
    watch: {
        active: {
            handler: function (val) {
                this.$nextTick(function() {
                    this.$refs.vanSuipe.swipeTo(val)
                })
            },
            immediate: true
        }
    },
    methods: {
        tabChange (index) {

        },
        swipeChange (index) {
            this.active = index
        },

        typeMode (v) {
            switch (v) {
                case 0:
                    return ['danger', '渠道商']
                case 1:
                    return ['primary', '经销商']
                case 2:
                    return ['success', '生产厂家']
                case 3:
                    return ['primary', '自营']
            }
        },
		
		getBaseInfo:function(){
			const that = this
			that.merchant_id=that.$route.query.id
			
			
			that.$merchant.merchantDeail(that.merchant_id).then(function(res){
				const data = res.data||{}
				that.detail = data.info||[]
				that.brand_list = data.info.brand_list||[]
				
				
			})
			
			var param = {
				
				mch_id:that.merchant_id
			}
			that.$goods.getGoodsScreenList(param).then(function(res){
				const data = res.data||{}
				that.goods_list = data.list||[]
				
				
				
			})
			
		},
		
		
    }
}
</script>

<style lang="less" scoped>
.big-img {
    height: 150px;
    width: 100%;
}
.box {
    height: 100%;
    background-color: #fafafa;
    min-height: 40vh;
}

.brnad-img {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
    margin-right: 18px;
}
.img-box {
    display: inline-block;
    box-sizing: border-box;
    &:nth-child(4n + 4) {
        .brnad-img {
            margin-right: 0;
        }
    }
}

.item {
    height: 120px;
    background-color: #fff;
    &:last-child {
        margin-bottom: 20px;
    }
    .checkbox {
        width: 40px
    }
    .shop-box-data {
        padding-left: 20px;
        padding-right: 20px;
        img {
            height: 60px;
            min-width: 60px;
            width: 60px;
        }
        .msg {
            // height: 56px;
            padding-left: 10px;
            width: 100%;
            .name {
                width: 100%;
            }
        }
    }
    .tag- {
        border-radius: 4px;
        margin-right: 10px;
    }
}
</style>
